<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>内部样式</title>
    <!-- 
        内部样式
        在head标签中使用style标签书写css样式

        语法:
        选择器 {
          样式名称: 样式值;
          样式名称: 样式值;
          ...
        }

        优点: HTML和CSS的分离,样式可以复用(仅限当前页面),后期维护便捷

        优先级
        行内样式 > 内部样式

        层叠原理:
        如果多种样式同时作用在一个元素上,则效果为所有样式累加,不同的样式类型正常显示,相同样式类型根据优先级决定,高者显示(低者被覆盖)!
    -->
    <style>
      p {
        color: red; /* 字体颜色 */
        font-size: 25px; /* 字体大小 */
      }
    </style>
  </head>
  <body>
    <p>段落1</p>
    <p>段落2</p>
    <p style="color: skyblue; font-style: italic">段落3</p>
    <p>段落4</p>
    <p>段落5</p>
  </body>
</html>
